<template>
  <div class="goods-sku">
    <dl v-for="item in specs" :key="item">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="y in item.values" :key="y.name">
          <img
            v-if="y.picture"
            :src="y.picture"
            :class="{ selected: y.selected, disabled: y.disabled }"
            alt=""
            @click="handleSelectLight(item, y)"
          />
          <span
            v-else
            :class="{ selected: y.selected, disabled: y.disabled }"
            @click="handleSelectLight(item, y)"
            >{{ y.name }}</span
          >
        </template>
      </dd>
    </dl>
  </div>
</template>

<script>
import powerSet from "../../vendor/power-set";

export default {
  name: "GoodsSku",
  props: ["specs", "skus", "skuId"],
  setup(props, { emit }) {
    // 可组合数据的对象
    let pathMap = createPathMap(props.skus);
    // console.log(props.skuId);

    // 点击选中高亮
    const handleSelectLight = (spec, value) => {
      // console.log(spec);
      // console.log(value);
      // 如果点击的这个有选中状态，则改为不选中
      if (value.selected) {
        value.selected = false;
      } else {
        // 先将当前列所有的选中状态改为false
        spec.values.forEach((item) => {
          item.selected = false;
        });
        // 特指点击的元素为选中
        value.selected = true;
      }
      updateSpecDisabled(props.specs, pathMap);
      sendDataToParent(props.skus, props.specs, pathMap, emit);
    };

    // 刚进入时立即判断哪个规格没有库存
    updateSpecDisabled(props.specs, pathMap);

    // 默认选中规格
    setDefaultSelected(props.skuId, props.skus, props.specs);

    return {
      handleSelectLight,
    };
  },
};

// 将可组合的数据变成对象
function createPathMap(skus) {
  let pathMap = {};
  // console.log(skus);
  skus.forEach((sku) => {
    // 将有库存的组合提取出来
    if (sku.inventory > 0) {
      // console.log("这是有库存的组合");
      // console.log(sku.specs);
      // 将有库存的组合提取出来
      let valueNames = sku.specs.map((item) => item.valueName);
      // console.log(valueNames);
      // 将完整组合的长度保存下来
      let maxlength = valueNames.length;
      // 将数组中的子级元素返回
      let sets = powerSet(valueNames);
      // console.log(sets);
      // 循环遍历，创建组合对象
      sets.forEach((set) => {
        let key = set.join("_");
        // console.log(key);
        let sameflag = set.length === maxlength;
        // console.log(pathMap[key]);
        // 如果 key 有值 和 对象没有该值的时候进入该判断
        if (key && !pathMap[key]) {
          // console.log("符合判断，进入");
          if (!sameflag) {
            pathMap[key] = null;
          } else {
            pathMap[key] = sku.id;
          }
        }
      });
    }
  });

  return pathMap;
}

// 更新禁用选项（初始化/点击的规格按钮时）
function updateSpecDisabled(specs, pathMap) {
  // console.log(pathMap);
  // 如果在规格对象中没有存在当前规格选项，则为禁用
  specs.forEach((spec, index) => {
    // 为了不影响查询结果，我们需要在第一次循环中重置 selected
    let selected = getSpecsData(specs);
    // console.log(selected);
    spec.values.forEach((value) => {
      // console.log(value.name, value.selected);
      // 判断当前索引下是否有选中的规格，有则跳过
      if (value.selected) return;

      selected[index] = value.name;
      // console.log(selected);
      let key = selected.filter((item) => item).join("_");
      // console.log(index + ":", key);

      value.disabled = !(key in pathMap);
    });
  });
}

// 获取用户点击的规格数据
function getSpecsData(specs) {
  // console.log(specs);
  let result = [];
  // 查询选中的规格
  specs.forEach((spec, index) => {
    let selecte = spec.values.find((value) => value.selected);
    // console.log(selecte);
    // console.log(value);
    // 选中的规格进入
    if (selecte) {
      result[index] = selecte.name;
    } else {
      // 如果没有选中，则用 undefined 来占位
      result[index] = undefined;
    }
  });

  return result;
}

// 默认选中规格
function setDefaultSelected(skuId, skus, specs) {
  // console.log(skuId);
  if (!skuId) return;

  // 获取默认选中的规格数组
  let defaultSelected = skus
    .find((sku) => sku.id === skuId)
    .specs.map((spec) => spec.valueName);
  // console.log(defaultSelected);

  // 遍历 specs 规格数据，查询要哪个规格选中
  specs.forEach((spec, index) => {
    spec.values.forEach((value) => {
      // console.log(defaultSelected[index]);
      // console.log(value.name);
      if (defaultSelected[index] === value.name) {
        value.selected = true;
      }
    });
  });
}

// 将用户选择规格返回给父组件
function sendDataToParent(skus, specs, pathMap, emit) {
  let selected = getSpecsData(specs).filter((item) => item);

  // 选择的规格长度等于规格数据的长度
  if (selected.length === specs.length) {
    // 根据规格数组在规格对象中查找出对应的规格组合id
    let skuId = pathMap[selected.join("_")];

    // 根据规格id得出相应的规格组合详情
    let result = skus.find((sku) => sku.id === skuId);
    // console.log(result);

    emit("handleBackCome", {
      skuId: skuId,
      inventory: result.inventory,
      oldPrice: result.oldPrice,
      price: result.price,
    });
  }
}
</script>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;

  dl {
    display: flex;
    padding-bottom: 5px;
    align-items: center;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      flex: 1;
      color: #666;

      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }

      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
